<template>
  <div class="menu">
    <toggle-show @search="getList"></toggle-show>
    <a-table :columns="columns" :data-source="data">
      <span slot="icon" slot-scope="text">
        <a-icon :type="text" />
      </span>
      <span slot="role" slot-scope="text">
        <a-tag v-for="role in text" :key="role" color="green">{{ role }}</a-tag>
      </span>
      <span slot="action" slot-scope="text, record">
        <a-icon type="edit" style="color: #1890ff" />
        <a style="font-size: 14px" @click="handleUpdate(record)">修改</a>
        <a-divider type="vertical"></a-divider>
        <a-icon type="delete" style="color: #1890ff" />
        <a-popconfirm
          :title="
            record.children.length ? '包含子菜单，确定删除？' : '确定删除?'
          "
          ok-text="是"
          cancel-text="否"
          @confirm="confirm(record)"
        >
          <a style="font-size: 14px">删除</a>
        </a-popconfirm>
      </span>
    </a-table>

    <add-dialog @success="getList"></add-dialog>
    <update-dialog @success="getList"></update-dialog>
  </div>
</template>

<script>
import { queryMenuList, deleteMenu } from "@/api/system/menu";
import { queryRoleList } from "@/api/system/role";
import ToggleShow from "./ToggleShow";
import AddDialog from "./AddDialog";
import UpdateDialog from "./UpdateDialog";

const columns = [
  {
    title: "菜单名称",
    dataIndex: "name",
    width: 150,
  },
  {
    title: "图标",
    dataIndex: "icon",
    align: "center",
    scopedSlots: { customRender: "icon" },
  },
  {
    title: "排序",
    dataIndex: "sort",
    align: "center",
  },
  {
    title: "权限",
    dataIndex: "role",
    align: "center",
    scopedSlots: { customRender: "role" },
  },
  {
    title: "组件路径",
    dataIndex: "path",
    align: "center",
  },
  {
    title: "路由",
    dataIndex: "url",
    align: "center",
  },
  {
    title: "操作",
    dataIndex: "action",
    align: "center",
    width: 220,
    scopedSlots: { customRender: "action" },
  },
];
export default {
  name: "Menu",
  components: {
    AddDialog,
    UpdateDialog,
    ToggleShow,
  },
  data() {
    return {
      columns: columns,
      data: [],
      roleList: [],
      oneMenu: {},
    };
  },
  methods: {
    async getList(params = {}) {
      queryMenuList(params).then(({ data }) => {
        this.data = this.mapData(data);
      });
    },
    async getRoleList() {
      queryRoleList().then(({ data }) => {
        this.roleList = data;
      });
    },
    mapData(data) {
      for (let i = 0; i < data.length; i++) {
        let roles = data[i].role;
        data[i].role = roles.map((r) => {
          let index = this.roleList.findIndex((role) => role.value === r);
          return this.roleList[index].name;
        });
        if (data[i].children.length > 0) {
          this.mapData(data[i].children);
        }
      }
      return data;
    },
    confirm(record) {
      deleteMenu({ _id: record._id }).then((res) => {
        if (res.data.success) {
          this.$message.success("删除成功!");
          this.getList();
        } else {
          this.$message.error("删除失败！");
        }
      });
    },
    handleUpdate(record) {
      this.$store.dispatch("SetUpdateVisible", [true, "menu", record._id]);
    },
  },
  async created() {
    await this.getRoleList();
    await this.getList();
  },
};
</script>

<style lang="scss">
</style>